import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col, Flex } from 'antd';
import { getChildrenToRender } from './utils';
import { isImg } from './utils';
import facebook from '@/assets/homeImg/facebook.png'
import addressIcon from '@/assets/homeImg/addressIcon.png'
import address from '@/assets/homeImg/address.png'
import xIcon from '@/assets/homeImg/x.png'
import phoneIcon from '@/assets/homeImg/phoneIcon.png'
import emailIcon from '@/assets/homeImg/emailIcon.png'
import { insUrl,facebookUrl, googleUrl } from '@/utils';

class Footer extends React.Component {
  static defaultProps = {
    className: 'footer1',
  };

  //打开新连接
  openBlank = (url) => {
    window.open(url, "_blank");
  }

  getLiChildren = (data) =>
    data.map((item, i) => {
      const { title, childWrapper, ...itemProps } = item;
      
      return (
        <Col key={i.toString()} {...itemProps} title={null} content={null}>
          <h2 {...title}>
            {typeof title.children === 'string' &&
              title.children.match(isImg) ? (
              <img src={title.children} width="100%" alt="img" />
            ) : (
              title.children
            )}
          </h2>
          <div {...childWrapper}>
            {childWrapper.children.map(getChildrenToRender)}
          </div>
        </Col>
      );
    });

  render() {
    const { ...props } = this.props;
    const { dataSource } = props;
    delete props.dataSource;
    delete props.isMobile;
    const childrenToRender = this.getLiChildren(dataSource.block.children);
    return (
      <div {...props} {...dataSource.wrapper} >
        <OverPack {...dataSource.OverPack}>
          <QueueAnim
            type="bottom"
            key="ul"
            leaveReverse
            component={Row}
            {...dataSource.block}
          >
            <Col key='facebook'  className='footerLeft' xs={24} md={14} title={null} content={null}>
            
              <div className='footerTop'>
              <span className='footerIconImg' onClick={()=>{this.openBlank(insUrl)}}>
                <img src={facebook}></img>
              </span>
              <span className='footerIconImg' onClick={()=>{this.openBlank(facebookUrl)}}>
                <img src={xIcon}></img>
              </span>
              </div>
           
            </Col>
            <Col key='facebook2' xs={24} md={10} title={null} content={null}>
              <div>
                <Flex align='center' style={{marginBottom:12}}>
                  <div className='footerIcon' onClick={()=>{this.openBlank(googleUrl)}}>
                    <img src={addressIcon}></img>
                  </div>
                  <div className='address'>
                    <img src={address} width='100%'></img>
                  </div>
                </Flex>
                <Flex align='center' style={{marginBottom:12}}>
                  <div className='footerIcon' >
                    <img src={phoneIcon}  ></img>
                  </div>
                  <div className='contentText' style={{whiteSpace:'nowrap'}}>
                   <p>+86-13777608508</p>
                   <p>+86-13777608539</p>
                  </div>
                </Flex>
                <Flex>
                  <div className='footerIcon'>
                    <img src={emailIcon}></img>
                  </div>
                  <div className='contentText'>
                    <p>chinayhelvis@163.com</p>
                  </div>
                </Flex>
               

              </div>

             
            </Col>

            {/* {childrenToRender} */}
          </QueueAnim>
          <TweenOne
            animation={{ y: '+=40', opacity: 0, type: 'from' }}
            key="copyright"
            {...dataSource.copyrightWrapper}
          >
            {/* <div {...dataSource.copyrightPage}>
              <div {...dataSource.copyright}>
                {dataSource.copyright.children}
              </div>
            </div> */}
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Footer;
